<div class="row">
    <div class="col-lg-12">
        <h3 class="stepTitle" data-content="labels.loginWidget"></h3>
    </div>
</div>

<div class="successMessage alert alert-success alert-dismissable fade in" style="display:none;">
    <button type="button" class="close" onclick="$(this).parent('.alert').hide();">&times;</button>
    <span class="glyphicon glyphicon-ok"></span> <span data-content="labels.messageSuccess"></span>
</div>

<div class="errorMessage alert alert-danger alert-dismissable fade in" style="display:none;">
    <button type="button" class="close" onclick="$(this).parent('.alert').hide();">&times;</button>
    <span class="glyphicon glyphicon-remove"></span> <span data-content="labels.messageError"></span>
</div>

<form id="form" class="form-horizontal" style="width:487px;" role="form">

    <div class="form-group">
        <label for="widgetWidth" class="col-sm-4 control-label"><span data-content="labels.widgetWidth"></span>:</label>
        <div class="col-sm-8" data-template-bind='[{"attribute": "data-content", "value": "labels.HelpWidgetWidth"},{"attribute": "data-title", "value": "labels.widgetWidth"} ]' data-toggle="popover" data-container="body" data-placement="right">
            <div class="col-sm-7">
                <input type="text" class="form-control" id="widgetWidth" name="widgetWidth" data-value="loginWidget.widgetWidth">
            </div>
            <div class="pull-left">
                <select class="form-control" id="widgetWidthUnit" name="widgetWidthUnit">
                    <option value="px">px</option>
                    <option value="%">%</option>
                </select>
            </div>
        </div>
    </div>

    <div class="form-group">
        <label for="widgetRows" class="col-sm-4 control-label"><span data-content="labels.widgetRows"></span>:</label>
        <div class="col-sm-8" data-template-bind='[{"attribute": "data-content", "value": "labels.HelpWidgetRows"},{"attribute": "data-title", "value": "labels.widgetRows"} ]' data-toggle="popover" data-container="body" data-placement="right">
            <div class="col-sm-7 spinner_wraper">
                <div class="spinner input-group">
                    <input type="text" class="form-control" id="widgetRows" name="widgetRows" data-value="loginWidget.widgetRows">
                    <span class="spinnerUp input-group-addon glyphicon glyphicon-chevron-up"></span>
                    <span class="spinnerDown input-group-addon glyphicon glyphicon-chevron-down"></span>
                </div>
            </div>
            <div class="col-sm-5">
                <div class="checkbox">
                    <label>
                        <input type="checkbox" id="autoRows"> Auto
                    </label>
                </div>
            </div>
        </div>
    </div>

    <div class="form-group">
        <label for="widgetColumns" class="col-sm-4 control-label"><span data-content="labels.widgetColumns"></span>:</label>
        <div class="col-sm-8" data-template-bind='[{"attribute": "data-content", "value": "labels.HelpWidgetColumns"},{"attribute": "data-title", "value": "labels.widgetColumns"} ]' data-toggle="popover" data-container="body" data-placement="right">
            <div class="col-sm-7">
                <div class="spinner input-group" >
                    <input type="text" class="form-control" id="widgetColumns" name="widgetColumns" data-value="loginWidget.widgetColumns">
                    <span class="spinnerUp input-group-addon glyphicon glyphicon-chevron-up"></span>
                    <span class="spinnerDown input-group-addon glyphicon glyphicon-chevron-down"></span>
                </div>
            </div>
        </div>
    </div>

    <div class="form-group">
        <label for="buttonLabel" class="col-sm-4 control-label"><span data-content="labels.buttonLabel"></span>:</label>
        <div class="col-sm-8" data-template-bind='[{"attribute": "data-content", "value": "labels.HelpWidgetButtonLabel"},{"attribute": "data-title", "value": "labels.buttonLabel"} ]' data-toggle="popover" data-container="body" data-placement="right">
            <div class="col-sm-7">
                <label class="radio-inline">
                    <input type="radio" name="buttonLabel" value="1"> <span data-content="labels.yes"></span>
                </label>
                <label class="radio-inline">
                    <input type="radio" name="buttonLabel" value="0"> <span data-content="labels.no"></span>
                </label>
            </div>
        </div>
    </div>

    <div class="form-group">
        <div class="col-sm-offset-4 col-sm-8">
           <button type="button" id="save" class="btn btn-success"><span class="glyphicon glyphicon-floppy-disk"></span> <span data-content="labels.btnSave"></span></button>
           <button type="button" id="cancel" class="btn btn-danger"><span class="glyphicon glyphicon-remove"></span> <span data-content="labels.btnCancel"></span></button>  
        </div>
    </div>

</form>

<hr/>

<div class="row">
    <div class="col-lg-12">
        <div id="ESLIP_Plugin"></div>
    </div>
</div>

<hr/>

<div class="row">
    <div class="col-sm-12">
        <label for=""><span data-content="labels.loginFormDesc"></span></label>
    </div>
</div>

<div class="row">
    <div class="col-lg-12">
        
        <div class="codeContainer">
            <span class="tag">&lt;html&gt;</span><br/>
            <span class="tab1 tag">&lt;head&gt;</span><br/>
            <span class="tab2 tag">&lt;link</span> <span class="attribute">rel=</span><span class="text">&quot;stylesheet&quot;</span> <span class="attribute">type=</span><span class="text">&quot;text/css&quot;</span> <span class="attribute">href=</span><span class="text">&quot;<span data-content="pluginCss"></span>&quot;</span> <span class="tag">/&gt;</span><br/>
            <span class="tab2 tag">&lt;script </span><span class="attribute">type=</span><span class="text">&quot;text/javascript&quot;</span> <span class="attribute">src=</span><span class="text">&quot;<span data-content="pluginJs"></span>&quot;</span><span class="tag">&gt;&lt;/script&gt;</span><br/>
            <span class="tab1 tag">&lt;/head&gt;</span><br/>
            <span class="tab1 tag">&lt;body&gt;</span><br/>
            <span class="tab2 tag">&lt;div</span> <span class="attribute">id=</span><span class="text">&quot;<span data-content="eslipDivId"></span>&quot;</span><span class="tag">&gt;&lt;/div&gt;</span><br/>
            <span class="tab1 tag">&lt;/body&gt;</span><br/>
            <span class="tag">&lt;/html&gt;</span><br/>
        </div>

    </div>
</div>